<template>
  <div id="home">
    <!-- 顶部navbar标签 -->
    <navbar class="navbar_home">
      <div slot="middle">购物街</div>
    </navbar>
    <!-- 复制的tabbarcontrol,利用它来实现吸顶效果,当滚动距离大于等于下面真正的tabbarcontrol时就v-show=true显示出来,否则就隐藏 -->
    <tabcontrol
      :titles="['流行', '新款', '精选']"
      @itemclick="home_tabcontrol"
      ref="tab"
      class="aaaa"
      v-show="istabFixed"
    ></tabcontrol>
    <scroll
      class="content"
      ref="scroll"
      @scroll1="contentScroll"
      :probetype="3"
      @pullingUp="more"
    >
      <!-- 轮播图标签 -->
      <swiper :banner="banner" @imgload="imageofload"></swiper>
      <!-- 推荐模块标签 -->
      <recommend :recommend="recommend"></recommend>
      <!-- 本周流行模块标签 -->
      <homefeature></homefeature>
      <!-- 中间控制分类的navbar模块的标签 -->
      <tabcontrol
        :titles="['流行', '新款', '精选']"
        @itemclick="home_tabcontrol"
        ref="tabcontrol"
      ></tabcontrol>
      <!-- 商品列表模块 -->
      <goodslist :goods="currenttype1"></goodslist>
    </scroll>
    <!-- 回到顶部的按钮 -->
    <up v-show="isShow" class="back-top" @click.native="backClick"></up>
  </div>
</template>

<script>
import navbar from "components/common/navbar/Navbar";
import recommend from "./homecomponents/homerecommend.vue";
import { gethomemutuidata, gethomegoods } from "network/home_request.js";
import swiper from "components/common/swiper/swiper";
import homefeature from "./homecomponents/homefeature.vue";
import tabcontrol from "components/content/tabcontrol";
import goodslist from "components/content/goods/goodslist";
import scroll from "components/common/scroll/better_scroll";
import up from "components/content/backtop";
export default {
  // 组件名称
  name: "home", // 组件参数 接收来自父组件的数据
  props: {}, // 局部注册的组件
  components: {
    navbar,
    recommend,
    swiper,
    homefeature,
    tabcontrol,
    goodslist,
    scroll,
    up,
  }, // 组件状态值
  data() {
    return {
      banner: [], // 轮播图数据
      recommend: [], // 推荐数据
      // 商品流行,新款,精选分类数据
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currenttype: "pop",
      isShow: false,
      tabbarOffsetTop: 0,
      istabFixed: false,
      savey: 0,
    };
  },
  created() {
    // 请求多条数据,包含轮播图
    this.gethomemutuidata();
    // 请求商品分类数据
    this.gethomegoods("pop");
    this.gethomegoods("new");
    this.gethomegoods("sell");
  },
  // 进入home组件,处于活跃状态时直接跳转到离开home页面时候保存的滚动距离
  activated() {
    this.$refs.scroll.bscroll.refresh();
    this.$refs.scroll.bscroll.scrollTo(0, this.savey, 0);
  },
  // 离开home组件,处于不活跃状态时保存当前的滚动距离
  deactivated() {
    this.savey = this.$refs.scroll.bscroll.y;
  },
  methods: {
    // 获取轮播图数据方法
    gethomemutuidata() {
      gethomemutuidata().then((res) => {
        this.banner = res.data.data.banner.list;
        this.recommend = res.data.data.recommend.list;
      });
    },
    // 获取商品分类数据方法
    gethomegoods(type) {
      let page = this.goods[type].page + 1;
      gethomegoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page = page;
      });
    },
    // 中间控制商品分类切换的tabbar
    home_tabcontrol(index) {
      switch (index) {
        case 0:
          this.currenttype = "pop";
          break;
        case 1:
          this.currenttype = "new";
          break;
        case 2:
          this.currenttype = "sell";
          break;
      }
      this.$refs.tab.active = index;
      this.$refs.tabcontrol.active = index;
    },
    backClick() {
      this.$refs.scroll.bscroll.scrollTo(0, 0, 500); // 0 , 0 代表回滚到x,y轴什么位置  1500ms表示回到顶部需要的时间
    },
    contentScroll(position) {
      // 判断滚动到什么时候显示回到顶部按钮
      this.isShow = -position.y > 626;
      // 判断滚动到什么时候tabbar吸顶
      this.istabFixed =
        -position.y >=
        this.tabbarOffsetTop - this.$refs.tabcontrol.$el.clientHeight - 3;
    },
    // 上拉加载更多
    more() {
      this.gethomegoods(this.currenttype);
      //  调用实例对象下的refresh()方法,用来解首次打开页面无法实现better-scroll效果
      this.$refs.scroll.bscroll.refresh();
    },
    imageofload() {
      this.tabbarOffsetTop = this.$refs.tabcontrol.$el.offsetTop;
    },
  },
  computed: {
    currenttype1() {
      return this.goods[this.currenttype].list;
    },
  },
};
</script>
<style scoped>
.navbar_home {
  background-color: palevioletred;
  font-size: 16px;
  color: #fff;
}
.content {
  /* 计算属性 calc函数可以计算css中的数据 100vh代表视口宽度 */
  height: calc(100vh - 93px);
}
.aaaa {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  z-index: 9999;
}
</style>
